<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--css-->
    <link rel="stylesheet" href="static/bootstrap-3.3.7/dist/css/bootstrap.css">
    <link rel="stylesheet" href="static/css/type.css">
    <link rel="stylesheet" href="static/css/sidebar.css">
    <link rel="stylesheet" href="static/css/btn.css">
    <link rel="stylesheet" href="static/css/todo.css">
    <link rel="stylesheet" href="static/css/pager.css">
    <link rel="stylesheet" href="static/css/form.css">
    <link rel="stylesheet" href="static/css/navbar.css">
    <link rel="stylesheet" href="static/css/dropdown.css">
    <link rel="stylesheet" href="static/css/step-graph.css">
    <!--js-->
    <script href="text/script" src="static/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="static/bootstrap-3.3.7/dist/js/bootstrap.js"></script>
    <script href="text/script" src="static/js/step-graph.js"></script>
    <title>展示</title>
</head>
<style>
* {
        padding: 0;
        margin: 0;
        list-style: none;
        text-decoration: none;
    }
    
    .content {
        margin-right: 20px;
        margin-left: 170px;
    }
    
    .content h3:first-child {
        text-align: center;
    }
    
    table caption {
        text-align: center;
    }
}
</style>

<body>
    <ul class="sidebar">
        <li><a href="#button">1.按钮</a></li>
        <li><a href="#input">2.输入框</a></li>
        <li><a href="#to-list">3.任务列表</a></li>
        <li><a href="#page">4.分页</a></li>
        <li><a href="#type">5.排版</a></li>
        <li><a href="#form">6.表单元素</a></li>
        <li><a href="#table">7.表格</a></li>
        <li><a href="#nav">8.导航栏</a></li>
        <li><a href="#dropdown">9.下拉框</a></li>
        <li><a href="#step-graph">10.时序图</a></li>

    </ul>
    <div class="content">
        <h3 class="text-success">组件</h3>
        <div id="button" class="panel panel-default">
            <div class="panel-heading">按钮</div>
            <div class="panel-body">
                <button type="button" class="btn btn-default">Default</button>
                <button type="button" class="btn btn-primary">Primary</button>
                <button type="button" class="btn btn-info">Info</button>
                <button type="button" class="btn btn-danger">Danger</button>
                <button type="button" class="btn btn-success">Success</button>
                <button type="button" class="btn btn-warning">Warning</button>
                <button type="button" class="btn btn-inverse">Inverse</button>
                <button type="button" class="btn btn-disable">Disable</button>
            </div>
        </div>
        <div id="input" class="panel panel-default">
            <div class="panel-heading">输入框</div>
            <div class="panel-body">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Inactive">
                </div>
                <div class="form-group has-error">
                    <input type="text" class="form-control" placeholder="Error">
                </div>
                <div class="form-group has-success">
                    <input type="text" class="form-control" placeholder="Success">
                </div>
                <div class="form-group">
                    <input type="text" disabled="disabled" class="form-control" placeholder="Disable">
                </div>
            </div>
        </div>
        <div id="to-list" class="panel panel-default">
            <div class="panel-heading">任务列表</div>
            <div class="panel-body">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-6 col-md-4">
                            <div class="todo">
                                <div class="todo-search">
                                    <input class="todo-search-field" type="search" value="" placeholder="搜索" />
                                </div>
                                <ul>
                                    <li class="todo-done">
                                        <div class="todo-icon"></div>
                                        <div class="todo-content">
                                            <h4 class="todo-name">
                                                在<strong>下午6点</strong>见面
                                            </h4>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="todo-icon"></div>
                                        <div class="todo-content">
                                            <h4 class="todo-name">
                                                在<strong>下午6点</strong>见面
                                            </h4>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="todo-icon"></div>
                                        <div class="todo-content">
                                            <h4 class="todo-name">
                                                在<strong>下午6点</strong>见面
                                            </h4>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="todo-icon"></div>
                                        <div class="todo-content">
                                            <h4 class="todo-name">
                                                在<strong>下午6点</strong>见面
                                            </h4>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="page" class="panel panel-default">
            <div class="panel-heading">分页</div>
            <div class="panel-body">
                <ul class="pager">
                    <li class="previous"><a href="#">上一页</a></li>
                    <li class="next"><a href="#">下一页</a></li>
                </ul>
            </div>
        </div>
        <div id="type" class="panel panel-default">
            <div class="panel-heading">排版</div>
            <div class="panel-body">
                <h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
                <h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
                <h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
                <h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
                <h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
                <h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
            </div>
        </div>
        <div id="form" class="panel panel-default">
            <div class="panel-heading">表单元素</div>
            <div class="panel-body">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="username">用户名:</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="username">
                            <div class="input-group-addon">.com</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password"> 密 &nbsp;&nbsp;码 :</label>
                        <input type="text" class="form-control" id="password">
                    </div>
                    <button type="submit" class="btn btn-primary">登陆</button>
                </form>
                <form>
                    <div class="checkbox">
                        <label><input type="checkbox"></input>游泳</label>
                        <label><input type="checkbox"></input>跳舞 </label>
                        <label><input type="checkbox"></input>打游戏</label>
                    </div>
                    <div class="radio">
                        <label> <input type="radio" name="radio"></input>男 </label>
                        <label> <input type="radio" name="radio"></input>女 </label>
                    </div>
                </form>
            </div>
        </div>
        <div id="table" class="panel panel-default">
            <div class="panel-heading">表格</div>
            <div class="panel-body">
                <table class="table table-bordered table-striped table-hover">
                    <caption>程序猿人事资料</caption>
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <th>职业</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>翠花</td>
                            <td>20</td>
                            <td>男</td>
                            <td>程序猿</td>
                        </tr>
                        <tr>
                            <td>二狗</td>
                            <td>20</td>
                            <td>女</td>
                            <td>程序猿</td>
                        </tr>
                        <tr>
                            <td>三蛋</td>
                            <td>20</td>
                            <td>女</td>
                            <td>程序猿</td>
                        </tr>
                        <tr>
                            <td>李狗</td>
                            <td>20</td>
                            <td>女</td>
                            <td>程序猿</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div id="nav" class="panel panel-default">
            <div class="panel-heading">导航栏</div>
            <div class="panel-body">
                <div class="navbar navbar-default">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">百事可乐</a>
                    </div>
                    <ul class="nav navbar-nav navbar-left" data-toggle="tab">
                        <li><a href="#">菜单1</a></li>
                        <li><a href="#">菜单2</a></li>
                        <li><a href="#">菜单3</a></li>
                        <li><a href="#">菜单4</a></li>
                    </ul>
                    <form class="navbar-form navbar-right">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="关键字">
                        </div>
                        <button type="submit" class="btn btn-default">搜索</button>
                    </form>
                </div>
            </div>
        </div>
        <div id="dropdown" class="panel panel-default">
            <div class="panel-heading">下拉框</div>
            <div class="panel-body">
                <div class="dropdown">
                    <button class="btn dropdown-toggle" data-toggle="dropdown"><a href="#">X-Men</a><div class="span-box"><span class="caret"></span></div></button>
                    <ul class="dropdown-menu">
                        <li>
                            Choose hero
                        </li>
                        <li>
                            Spider Man
                        </li>
                        <li>
                            Wolverine
                        </li>
                        <li>
                            Captain America
                        </li>
                        <li class="active">
                            X-Men
                        </li>
                        <li>
                            Crocoile
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="step-graph" class="panel panel-default">
            <div class="panel-heading">时序图</div>
            <div class="panel-body">
                <div id="step-graph"></div>
                <button class="btn btn-pre btn-primary">上一步</button>
                <button class="btn btn-next btn-primary">下一步</button>
            </div>
        </div>
        <div id="xxx" class="panel panel-default">
            <div class="panel-heading">xxx</div>
            <div class="panel-body">

            </div>
        </div>
        <div id="xxx" class="panel panel-default">
            <div class="panel-heading">xxx</div>
            <div class="panel-body">

            </div>
        </div>
        <div id="xxx" class="panel panel-default">
            <div class="panel-heading">xxx</div>
            <div class="panel-body">

            </div>
        </div>
        <div id="xxx" class="panel panel-default">
            <div class="panel-heading">xxx</div>
            <div class="panel-body">

            </div>
        </div>
        <div id="xxx" class="panel panel-default">
            <div class="panel-heading">xxx</div>
            <div class="panel-body">

            </div>
        </div>

        <div id="xxx" class="panel panel-default">
            <div class="panel-heading">xxx</div>
            <div class="panel-body">

            </div>
        </div>

    </div>
</body>
<script>
    $(function() {
        $(".todo ul li").on("click", function(e) {
            $(this).toggleClass("todo-done");
        })
    })
</script>

</html>